<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/10/30
  Time: 16:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
  String path = request.getContextPath();
  String imgPath = request.getServletContext().getRealPath("/productImages");
%>
<html>
<head>
    <title>订单列表</title>
    <link rel="stylesheet" href="<%=path%>/resources/css/font.css">
    <link rel="stylesheet" href="<%=path%>/resources/css/xadmin.css">
    <script type="text/javascript" src="<%=path%>/resources/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/resources/js/x-layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=path%>/resources/js/xadmin.js"></script>
</head>
<body class="layui-anim layui-anim-up">
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">订单管理</a>
            <a>
              <cite>订单列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:40px">&#xe669;</i></a>
</div>
<div class="x-body">
    <div class="layui-form x-center" style="width:1000px">
        <div class="layui-form-pane" style="margin-top: 15px;">
            <div class="layui-form-item">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="orderNo" id="orderNo" placeholder="请输入订单号"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                    <select id="orderState">
                        <option value="">订单状态</option>
                        <option value="已取消">已取消</option>
                        <option value="未支付">未支付</option>
                        <option value="已支付">已支付</option>
                        <option value="已完成">已完成</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn" data-type="reload" id="check">搜索</button>
                </div>
            </div>
        </div>
    </div>
    <table type="layui-hide" id="orderTable" lay-filter="orderTable"></table>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn" onclick="x_admin_show('添加订单','<%=path%>/order/addOrderHtm',700,600)"><i class="layui-icon"></i>添加</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="orderStatusJs">
    <span class="layui-btn layui-btn-normal layui-btn-mini">
    {{# if(d.orderStatus == '已取消') { }}  
    已取消
    {{# } else if(d.orderStatus == '未支付') { }}  
    未支付
    {{# } else if(d.orderStatus == '已支付') { }}
    已支付
    {{# } else if(d.orderStatus == '已完成') { }}  
    已完成
    {{# } }} 
    </span>  
</script>
<script>
    layui.use([ 'table' ], function() {
        var table = layui.table
        ,$ = layui.$;
        table.render({
            elem: '#orderTable'
            ,id:'orderTable'
            ,limit:5
            ,url:"<%=path%>/order/getOrderPage"
            ,page: true
            ,toolbar: '#toolbarDemo'
            ,cols: [[
                {type:'checkbox', fixed: 'left'}
                ,{field:'orderNo', title: '订单号'}
                ,{field:'orderCreatTime', title: '创建时间',templet:function(row){return createTime(row.orderCreatTime)}}
                ,{field:'orderPayTime', title: '支付时间',templet:function(row){return createTime(row.orderPayTime)}}
                ,{field:'orderFinishTime', title: '完成时间',templet:function(row){return createTime(row.orderFinishTime)}}
                ,{field:'orderCancelTime', title: '取消时间',templet:function(row){return createTime(row.orderCancelTime)}}
                ,{field:'orderStatus', title: '订单状态',width:100 ,templet: '#orderStatusJs',sort:true }
                ,{fixed:'right', title:'操作', toolbar: '#barDemo',fixed:'right',width:180}
            ]]
        });

        $('#check').click(function(){
            var orderNo = $('#orderNo');
            var orderState = document.getElementById("orderState").value;
            table.reload('orderTable', {
                page:{
                    curr:1
                },
                where: {
                    //设定异步数据接口的额外参数，任意设
                    orderNo:orderNo.val(),
                    orderState:orderState
                }
            });
        });
        table.on('toolbar(orderTable)',function (obj) {
            var data = obj.data;
            if(obj.event == 'delAll'){
                var checkStatus = table.checkStatus('orderTable')
                    ,data = checkStatus.data;
                var ids="";
                var nos="";
                for(var i=0;i<data.length;i++){
                    ids=ids+data[i].orderId+";"
                    nos=nos+data[i].orderNo+";"
                }
                layer.confirm('确认要删除吗？', function(index) {
                    $.get("<%=path%>/order/delOrder?orderIds=" + ids +"&orderNos="+nos, function(data) {
                        if (data == "success") {
                            layer.alert("删除成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        } else {
                            layer.msg('删除失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            }
        })
        //监听工具条
        table.on('tool(orderTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('确认要删除吗？', function(index) {
                    $.get("<%=path%>/order/delOrder?orderIds=" + data.orderId +"&orderNos="+data.orderNo, function(data) {
                        if (data == "success") {
                            layer.alert("删除成功!", {icon: 6},function () {
                                window.location="javascript:location.replace(location.href);";
                            });
                        } else {
                            layer.msg('删除失败!', {
                                icon : 1,
                                time : 1000
                            });
                        }
                    });
                });
            }
        });
    });
    function createTime(v){
        if(null==v){return "";}
        var date = new Date(v);
        var y = date.getFullYear();
        var m = date.getMonth()+1;
        m = m<10?'0'+m:m;
        var d = date.getDate();
        d = d<10?("0"+d):d;
        var h = date.getHours();
        h = h<10?("0"+h):h;
        var M = date.getMinutes();
        M = M<10?("0"+M):M;
        var str = y+"-"+m+"-"+d+" "+h+":"+M;
        return str;
    }

    /*用户-删除*/
    function order_del(id,no){
        layer.confirm('确认要删除吗？', function(index) {
            $.get("<%=path%>/order/delOrder?orderId=" + id + "&orderNo="+no, function(data) {
                if ("success" == data) {
                    layer.alert("删除成功!", {icon: 6},function () {
                        window.location="javascript:location.replace(location.href);";
                    });
                } else {
                    layer.msg('删除失败!', {
                        icon : 1,
                        time : 1000
                    });
                }
            });
        });
    }
</script>
</body>
</html>
